Now let's create a user interface that will allow people to join the queue for the battle royale.
Or you could decline it.
And you also want to be able to get out of the queue prior to the start of the battle if you change
your mind.
I'm over in my explorer window here and I want to go down to my starter guy or starter guy.
Open that up screen guy, hit the plus and then if you don't have frame hit F or frame.
There we go.
We're going to add a frame.
I'm going to call this frame.
Battle Royale Frame.
Battle Royale f.
R m.
I might change the anchor point.
Let's go down to properties for our frame, and then I'll do a 0.5 and zero.
So I'm going to center this in the center of my screens.
I'm going to make the anchor point in the center of my component.
So 0.5 is the center.
Let's go down to position and we'll change that to 0.50.
How about 0.01?
So it's down from the top a little bit.
Zero pixel offset.
There we go.
And we got to change the size.
Let's do that.
Let's make that 50% on the x zero pixel offset 0.1 on the Y zero pixel offset.
Let's add our message label right here saying that there's going to be a battle that's happening and
you can join or decline.
So I'm going to go to my battle Royale frame.
Hit the plus, add a text label and I'm going to rename my text label to Battle Royale label for label
and we can make it a different color.
Let's scroll up to the top and the properties and maybe something bright looks good.
Let's change the anchor points.
Good.
I think the position is good.
I'm going to change the size.
Let's go down the size.
It's in pixels.
I'm going to change that to 0.6, which is 60% of the ex zero pixel offset one, which is 100% of the
Y on the frame, zero pixel offset.
Here we go.
And let's change our text font.
Maybe make it like comic or something.
Make whatever you want.
Here's some comic.
You can make it bold if you want.
And then we're going to change the label itself, the text itself with code.
You might want to change the collar.
Let's make a text scale to so you can make a little bigger.
And then we might want to come up with a pixel size.
But for now, just do text, text scale.
Let's hit our color.
I'll make it like bright green, but I can't really read it that well.
So I'm going to go down to my text.
Stroke transparency.
Hit a one and that puts a little that puts a little outline on it.
Now I'm going to add an except button here and a decline button here.
So on the battle royale frame, hit the plus and then we'll do a text button.
And then this is going to be my accept button.
I'll do a c c t btn button.
Let's change our button color.
Scroll up.
Air button color.
Background color.
Three Greenish.
Should we make it the same green?
Let's try that and then I've got a position.
It I got to change the size.
Oh, here's position.
Let's do that.
Let's change the position.
I played around with a few numbers.
I think 0.625 works out pretty good on the x zero pixel offset 0.15 and the Y and zero pixel offset.
Yeah, we just got to change the size though.
It's too big.
Let's make it.
You don't make it too small though, because your mobile users won't be able to use it then.
So for size I'm going to do 0.150.7 and zero.
Nice.
And let's change the font.
Make it the same as my my label.
So I'll make that comic.
Yeah, we could do that.
Bold.
This one I'm going to say, except.
Because we're not going to change it with the code.
Should we change the wheel?
Keep it, keep it black, because I have that green there for the label.
Do a tech scale that'll work and let's just go ahead and copy it.
Let's do a control D or duplicate, I should say, and we'll make this the decline button with a D decline
button.
Or change the text.
I see the text right here.
So I'll say decline.
And we're going to have to move it because right on top of our our accept button, let's scroll up a
little bit.
Font looks good.
And there's the possession, I think for possession instead of point 6 to 5, I'll do point 8 to 5.
Yeah, that's pretty good.
Let's change the color, too.
So I'm going to scroll up a little more.
Here we go.
Background color three.
I don't know.
Make it like a kind of an orange sort of look.
So it looks like we're saying no.
And let's make this background around the buttons transparent.
So I'm going to go to my battle royale frame.
And let's see, background transparency.
I'll just make that one.
So I could.
Yeah, that'll work.
That decline looks a little funny.
That's good enough.
You could fix it.
You could fix it however you want.
There's one last thing I want to add in this video.
I'm going to add the capability for the server to contact my UI.
So we're going to have a script in here and we're going to talk from pressing the button to bring this
up to displaying when the battle starts and having our countdown, we're going to need something like
a remote event.
So open up replicated storage.
You see, we have a bunch of remote events.
Let's add one more for our battle royale.
Let's do remote event and then I'll call this battle Royale.
Ari All right.
And now we can make our button here.
The script on the button, talk to our UI through our Battle Royale remote event.
Let's go ahead and do that in the next video.